<!-- 询问框插件 --> 
<!-- 	<modal  :modalNameWatch="modalName"
		 :title="'提示'" :msg="modalMsg" :theme="'danger'" @callback="modalConfirm"></modal> -->
<template>
	<view class="com-modal " >
		<view class="cu-modal  " :class="modalName=='confirm'?'show':''" >
		  <view class="cu-dialog"  >
		    <view class="cu-bar bg-white justify-end">
		      <view class="content">{{title?title:'提示'}}</view>
		      <view class="action" @click="hideModal">
		        <text class="cuIcon-close text-red"></text>
		      </view>
		    </view>
		    <view class="padding-xl">
		      {{msg?msg:''}}
		    </view>
		    <view class="cu-bar modal-bottom bg-white text-center">
		      <view class="action">
		        <button class="cu-btn round" :class="class_cancel" @click="hideModal">取消</button>
		        <button class="cu-btn round margin-left" :class="class_sure" @click="sure">确定</button>  
		      </view>
		    </view>
		  </view>
		</view> 
	</view>
</template>

<script> 
	export default { 
		props: {   
			theme:{
				type:String,
				default:''
			},
			modalNameWatch:{
				type:String,
				default:"",
			} ,
			callback:{
				type:Function,
				default:null
			},
			msg:{
				type:String,
				default:null
			},
			title:{
				type:String,
				default:null
			}
			
		},
		created() {   
			 if(this.theme=="danger"){
				 this.class_sure="bg-red";
				 this.class_cancel="bg-grey";
			 }
		}, 
		computed: {
			
		},
		watch:{  
			modalNameWatch(val){
				console.log(val)
				this.modalName=val;
			},
			theme(val){
				if(val=='danger'){
					this.class_sure="bg-red";
					this.class_cancel="bg-grey";
				}
			}
		},
		data() {
			return {
				class_cancel:' line-green text-green ',
				class_sure:'bg-green ',
				modalName:''
			} 
		},    
		methods: {
			hideModal(){
				this.modalName="";  
				this.modalMsg='';
				this.$emit('callback', false);
				this.$emit('update:msg', "");
				this.$emit('update:modalNameWatch', "");
			},
			sure(){
				this.modalName=""; 
				this.modalMsg='';
				this.$emit('callback', true);
				this.$emit('update:msg', "");
				this.$emit('update:modalNameWatch', "");
			}
			 
		}
	}
</script>

<style lang="scss">
	.com-modal{ 
		.modal-bottom .action{
			width:100%;
			.cu-btn{
				padding:10upx 60upx;margin: 0upx 40upx;
			}
		}
		.danger{
			
		}
	}
</style>
